<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<section>
    <h4>相关链接</h4>
    <ul>
        <li><a href="http://www.jb51.net/article/46374.htm">match和exec区别</a></li>
        <li><li><a href="http://blog.csdn.net/zaifendou/article/details/5746988/">正则表达式</a></li></li>
    </ul>
</section>
<body>
    <script>
        // 1创建正则表达式的方式
        // 普通方式
        const re1 = /\d+/g;
        // 构造函数方式
        const re2 = new RegExp("\\d+", "g");

        // 2正则表达式常见方法
        // 字符串（str）方法：match、matchAll、search、replace、split
        // 正则对象下（regexp）的方法：test、exec

        // 2.1 str.match(regexp)
        // 2.1.1 如果 regexp 不带有 g 标记，则它以数组的形式返回第一个匹配项，其中包含分组和属性 index（匹配项的位置）、input（输入字符串，等于 str）
        // 不是贪婪匹配啊
        var str = "I love JavaScript and JavaScript";
        var result = str.match(/Java(Script)/);
        console.log('=====2.1.1=====');
        console.log(result);
        console.log(result[0]);     // JavaScript（完全匹配）
        console.log(result[1]);     // Script（第一个分组）
        console.log(result.length); // 2
        console.log(result.index);  // 7（匹配位置）
        console.log(result.input);  // I love JavaScript（源字符串）

        // 2.1.2 如果 regexp 带有 g 标记，则它将所有匹配项以数组形式返回，而不包含分组和其他详细信息
        var result = str.match(/Java(Script)/g);
        console.log('=====2.1.2=====');
        console.log(result);
        console.log(result[0]); // JavaScript
        console.log(result.length); // 1

        // 2.2 str.matchAll(regexp)
        // 返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器
        console.log('=====2.2=====');
        var regexp = /t(e)(st(\d?))/g;
        var str = 'test1test2';
        var array = [...str.matchAll(regexp)];
        console.log(array[0]);// expected output: Array ["test1", "e", "st1", "1"]
        console.log(array[1]);// expected output: Array ["test2", "e", "st2", "2"]

        // 2.3 str.search(regexp)
        // 返回第一个匹配项的位置，如果未找到，则返回 -1
        var str = "A drop of ink may make a million think";
        console.log('=====2.3=====');
        console.log(str.search(/ink/i)); // 10（第一个匹配位置）

        // 2.4 str.replace(regexp)
        // 替换与正则表达式匹配的子串，并返回替换后的字符串。在不设置全局匹配g的时候，只替换第一个匹配成功的字符串片段
        var reg1 = /javascript/i;
        var reg2 = /javascript/ig;
        console.log('=====2.4=====');
        console.log('hello Javascript Javascript Javascript'.replace(reg1, 'js'));//hello js Javascript Javascript
        console.log('hello Javascript Javascript Javascript'.replace(reg2, 'js'));//hello js js js

        // 2.5 str.split(regexp)
        // 使用正则表达式（或子字符串）作为分隔符来分割字符串
        console.log('=====2.5=====');
        console.log('12, 34, 56'.split(/,\s*/)) // 数组 ['12', '34', '56']

        // 2.6 regexp.exec(str)
        // regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配项，与以前的方法不同，它是在正则表达式而不是字符串上调用的
        // 根据正则表达式是否带有标志 g，它的行为有所不同
        // 如果没有 g，那么 regexp.exec(str) 返回的第一个匹配与 str.match(regexp) 完全相同
        // 如果有标记 g，调用 regexp.exec(str) 会返回第一个匹配项，并将紧随其后的位置保存在属性regexp.lastIndex 中。下一次同样的调用会从位置 regexp.lastIndex 开始搜索，返回下一个匹配项，并将其后的位置保存在 regexp.lastIndex 中
        var str = 'More about JavaScript at https://javascript.info';
        var regexp = /javascript/ig;
        var result;
        console.log('=====2.6=====');
        while (result = regexp.exec(str)) {
            console.log(`Found ${result} ${result[0]} at position ${result.index} lastIndex ${regexp.lastIndex}`);
            // Found JavaScript at position 11
            // Found javascript at position 33
        }
        var str = 'hello world';
        var regexp = /(?<hello>hello)/;
        console.log(regexp.exec(str));

        // 2.7 regexp.test(str)
        // 查找匹配项，然后返回 true/false 表示是否存在
        var str = "I love JavaScript";
        console.log('=====2.7=====');
        console.log(/love/i.test(str)); // true
    </script>
</body>

</html>